<template>
  <div>
    <!-- 检查列表 -->
    <el-card class="customer_card">
      <el-form
        :model="searchForm"
        ref="searchRef"
        inline
        class="customer_search"
        @keydown.enter="getList()"
      >
        <el-form-item prop="code" label="检查单号">
          <el-input
            v-model="searchForm.code"
            placeholder="请输入检查单号"
            class="form_input"
          />
        </el-form-item>
        <el-form-item prop="customerName" label="姓名">
          <el-input
            v-model="searchForm.customerName"
            placeholder="请输入姓名"
            class="form_input"
          />
        </el-form-item>

        <el-form-item prop="customerTel" label="联系方式">
          <el-input
            v-model="searchForm.customerTel"
            placeholder="请输入联系方式"
            class="form_input"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="Search"
            @click="handleSearch"
            class="btn"
            >查询</el-button
          >
          <el-button icon="Refresh" @click="handleReset" class="btn"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="height: calc(100vh - 10rem)" class="customer_card mt-1">
      <div class="flex justify-end mb-[0.2rem]">
        <el-button
          type="primary"
          icon="Plus"
          class="btn"
          @click="openDrawer(0)"
        >
          新增
        </el-button>
      </div>

      <el-table :data="tableData" style="height: calc(100vh - 15rem)">
        <el-table-column type="expand" fixed>
          <template #default="props">
            <el-table
              :data="props.row.list"
              style="width: 95%; margin: 0px auto"
              border
            >
              <el-table-column
                prop="createdAt"
                label="创建时间"
                align="center"
              />
              <el-table-column prop="code" label="检查单号" align="center" />

              <el-table-column
                label="检查项目"
                align="center"
                show-overflow-tooltip
              >
                <template #default="{ row }">
                  <el-scrollbar max-height="100px">
                    <div
                      class="w-full flex flex-wrap items-start"
                      :style="{
                        'justify-content':
                          row.projectList && row.projectList.length <= 1
                            ? 'center'
                            : 'start',
                      }"
                    >
                      <div
                        v-for="item in row.projectList"
                        :key="item.id"
                        style="margin: 2px 3px"
                      >
                        <el-tag
                          type="info"
                          style="margin-left: 10px"
                          v-if="item.count == 0"
                          >{{ item.projectName }}</el-tag
                        >
                        <el-tag
                          type="success"
                          style="margin-left: 10px"
                          v-else-if="item.count > 0"
                          >{{ item.projectName }}</el-tag
                        >
                      </div>
                    </div>
                  </el-scrollbar>
                </template>
              </el-table-column>

              <el-table-column
                prop="companyName"
                label="所属分店"
                align="center"
              />
              <el-table-column label="操作" align="center" width="150">
                <template #default="{ row }">
                  <div class="operation w-full flex flex-col">
                    <el-button type="primary" @click="detailBtn(row)">
                      <el-icon>
                        <InfoFilled />
                      </el-icon>
                      详情
                    </el-button>
                    <el-button
                      class="mt-[0.2rem]"
                      type="danger"
                      v-if="row.status == 0"
                      @click="handleDelete(row.id)"
                    >
                      <el-icon> <Delete /> </el-icon>删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column
          label="客户名称"
          prop="customerName"
          fixed
          show-overflow-tooltip
        />
        <el-table-column
          label="受检人名称"
          prop="relationName"
          fixed
          show-overflow-tooltip
        />
        <el-table-column
          label="联系方式"
          prop="customerPhone"
          show-overflow-tooltip
        />
        <el-table-column label="性别" prop="name">
          <template #default="{ row }">
            <span v-if="row.sex === 1">男</span>
            <span v-else-if="row.sex === 2">女</span>
            <span v-else>---</span>
          </template>
        </el-table-column>
        <el-table-column label="年龄" prop="age" />

        <template #empty> 暂无检查单信息 </template>
      </el-table>

      <PagingQuery
        :page="page"
        :pageSize="pageSize"
        :total="total"
        @getList="getList"
        class="mt-[0.5rem]"
      />
    </el-card>

    <el-drawer
      v-model="drawer"
      destroy-on-close
      size="40%"
      :title="detailId == 0 ? '新增检查单' : '编辑检查单'"
    >
      <InsertUpdate
        :detailId="detailId"
        ref="insertUpdateRef"
        @handleBack="handleSuccess"
      />

      <template #footer>
        <el-button @click="drawer = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSubmitCheck"
          :loading="check_loading"
        >
          {{ check_loading ? "提交中..." : "提 交" }}
        </el-button>
      </template>
    </el-drawer>

    <el-drawer v-model="detail_drawer" title="详情" destroy-on-close size="90%">
      <DetailPage :detailForm="detailForm" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import InsertUpdate from "./component/InsertUpdate.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  ListTreeChecklistInfos,
  DeleteChecklistInfo,
} from "../../../../wailsjs/go/api/ReportApi.js";
import DetailPage from "./component/DetailPage.vue";

onMounted(() => {
  getList();
});

const searchRef = ref(null);
const searchForm = ref({
  code: "",
  customerName: "",
  customerTel: "",
});

const handleSearch = () => {
  getList();
};
const handleReset = () => {
  searchRef.value.resetFields();
  getList();
};

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);
const getList = (e) => {
  if (e) {
    page.value = e.page;
    pageSize.value = e.pageSize;
  }
  handleApiResponse(() =>
    ListTreeChecklistInfos({
      page: page.value,
      size: pageSize.value,
      ...searchForm.value,
    })
  ).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
};

// 新增or编辑
const drawer = ref(false);
const insertUpdateRef = ref(null);
const check_loading = ref(false);
const detailId = ref(null); // 0 新增 !0 编辑
const openDrawer = (id) => {
  detailId.value = id;
  drawer.value = true;
};
const handleSubmitCheck = () => {
  insertUpdateRef.value?.handleSubmit();
};
const handleSuccess = (val) => {
  if (val == 1) {
    check_loading.value = true;
    return;
  }
  check_loading.value = false;
  getList();
  drawer.value = false;
};

// 详情
const detail_drawer = ref(false);
const detailForm = ref({});
const detailBtn = (item) => {
  detailForm.value = item;
  detail_drawer.value = true;
};

// 删除
const handleDelete = (id) => {
  ElMessageBox.confirm("你确认删除该检查单吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    handleApiResponse(() => DeleteChecklistInfo({ id })).then((res) => {
      if (res.code == 0) {
        ElMessage.success("删除成功");
        getList();
      }
    });
  });
};
</script>

<style scoped lang="scss">
.customer_card :deep(.el-card__body) {
  @apply px-[0.5rem] py-[0.5rem];
}
.customer_search :deep(.el-form-item) {
  margin-bottom: 0;
}

.btn {
  @apply w-[4.5rem];
}

.operation .el-button + .el-button {
  @apply ml-0;
}

:deep(.el-drawer__body) {
  padding-top: 0.05rem !important;
  // background-color: pink !important;
}
:deep(.el-drawer__footer) {
  padding: 0.1rem 1rem 0.5rem;
  // background-color: pink !important;
}
</style>